<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="banners" :current="current" field="content">
			<swiper class="swiper-box">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 分块组件 -->
		<view style="margin: 8px;">
			<uni-segmented-control :current="current" :values="tops" @clickItem="onClickItem" styleType="button"
				activeColor="#2e90ff"></uni-segmented-control>
		</view>
		
		<view class="content">
			<!-- 预约 选择区县-渠道 -->
			<view v-show="current === 0">
				<view>
					<uni-section title="选择办理网点" type="circle"></uni-section>
					<view style="margin-left:12px;">
						<uni-section title="选择您所在的区县" type="line"></uni-section>
						<view style="margin:16px;">
							<uni-data-select v-model="quxian" :localdata="quxians" @change="changeQX"
								label="区县选择"></uni-data-select>
						</view>
						<uni-section title="选择您的办理网点" type="line"></uni-section>
						<view style="margin:16px;">
							<uni-data-select v-model="wangd" :localdata="wangds" @change="changeWD"
								label="网点选择"></uni-data-select>
						</view>
					</view>
					<uni-section title="确认办理网点" type="circle"></uni-section>
					<view style="margin-left: 32px;">
						<text>
							办理网点：{{quxian_name}}/{{wangd_name}}
						</text>
					</view>
					<view style="display: flex;justify-content: center;">
						<o-btn type="blue" size="200" @click="confirm">确认</o-btn>
					</view>
				</view>
			</view>
			<view v-show="current === 1">
				选项卡2的内容
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function() {
			uni.hideTabBar()
			this.wangds=this.wangdss[0]
		},
		data() {
			return {
				current: 0,
				quxian: 0,
				quxian_name:'区县未定',
				wangd:0,
				wangd_name:'网点未定',
				quxians: [{
						value: 0,
						text: "东湖区"
					},
					{
						value: 1,
						text: "红谷滩区"
					},
					{
						value: 2,
						text: "南昌县"
					},
				],
				wangds:[],
				wangdss:[
					[{
							value: 0,
							text: "东湖A"
						},
						{
							value: 1,
							text: "东湖B"
						},
					],
					[{
							value: 0,
							text: "红谷滩A"
						},
						{
							value: 1,
							text: "红谷滩B"
						},
					],
					[{
							value: 0,
							text: "南昌县A"
						},
						{
							value: 1,
							text: "南昌县B"
						},
						{
							value: 2,
							text: "南昌县C"
						},
					],
				],
				
				banners: [{
						image: '/static/images/banner/banner01.jpg'
					},
					{
						image: '/static/images/banner/banner02.jpg'
					},
					{
						image: '/static/images/banner/banner03.jpg'
					}
				],
				tops: ['预约', '我的']
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			changeQX(e) {
				this.quxian=e
				this.quxian_name=this.quxians[this.quxian].text
				this.wangds=this.wangdss[e]
				this.wangd=0
				this.wangd_name=this.wangds[this.wangd].text
			},
			changeWD(e){
				this.wangd=e
				this.wangd_name=this.wangds[this.wangd].text
			},
			confirm(){
				uni.showModal({
					content:'确定办理网点'
				})
			}
		}

	}
</script>

<style>
	/* .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  } */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>